import child from '../relation/child'
import { injectStore } from 'ee-vuex'
/**
 * option的用法
 * 1. 父元素用法
 * <parent v-model="model" :options="options">
 *   <template #default="{ i, option, index }">
 *     <child v-bind="option" />
 *   </template>
 * </parent>
 * 特点：
 * - 使用父元素model
 * - 可以自定义子元素
 * 
 * 2. 子元素用法
 * <child v-for="option, index in options" :key="index" v-bind="option" v-model="model" />
 * 特点：
 * × 可以单独使用子元素，但是radio互斥效果和checkbox同组效果将失效
 * 
 * 3. 父子元素用法
 * <parent v-model="model">
 *   <child v-for="option, index in options" :key="index" v-bind="option" />
 * </parent>
 * 特点：（和第一种用法一致）
 * - 使用父元素model
 * - 可以自定义子元素
 */

export default injectStore({
  mixins: [child],
  emits: {
    /** 选中状态发生变化时触发
     * @param i - 组件当前实例
     */
    change: (i) => true,
    /** 选中状态变成选中时触发
     * @param i - 组件当前实例
     */
    check: (i) => true,
  },
  props: {
    /** 必须拥有父容器时，选中时传递给父容器的v-model值 */
    value(value) {
      this.resetModelValue();
    },
    /** 是否选中 */
    checked: {
      type: Boolean,
      get(value) {
        // checked只接收Boolean值
        return !!value;
      },
      set(value) {
        // checked的变动将影响modelValue的值
        this.resetModelValue();
        if (this.parent)
          this.updateParent();
        this.$emit("change", this);
        if (value)
          this.$emit("check", this);
      }
    },
  },
  computed: {
    /** 有parent时，以parent的radio为主，true:单选(默认) / false:多选 */
    radio() { return (parent && parent.radio != undefined) ? parent.radio : this.defaultRadio; },
    defaultRadio() { return true; }
  },
  methods: {
    updateParent() {
      if (this.radio) {
        if (this.__checked) {
          // 让同组其它radio的checked设置为false
          for (let item of this.parent.children)
            if (item != this && item.__checked)
              item._checked = false;
          this.parent.updateValue(this.__value);
        } else {
          // 自己是最后一个选中的被强制设置成了false
          if (this.__value == this.parent._modelValue)
            this.parent.updateValue(undefined);
        }
      } else {
        // 选中则将值添加入父组件的数组中 / 没选中则将值从父组件的数组中移除
        if (this.__checked) {
          if (this.parent.__modelValue.indexOf(this.__value) == -1) {
            this.parent.__modelValue.push(this.__value);
            this.parent.updateValue();
          }
        } else {
          let index = this.parent.__modelValue.indexOf(this.value);
          if (index != -1) {
            this.parent.__modelValue.splice(index, 1);
            this.parent.updateValue();
          }
        }
      }
    },
    /** 根据value，checked重置modelValue的值 */
    resetModelValue() {
      if (this.value == undefined)
        this._modelValue = this.__checked;
      else
        this._modelValue = this.__checked ? this.__value : undefined;
    },
    /** 点击事件的操作 */
    click() {
      if (this.radio) {
        if (!this.__checked)
          this._checked = true;
      } else
        this._checked = !this.__checked;
    }
  },
})